<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
        <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core';

export default {
    name:"Scroll",
    props:{
       probeType:{
        default(){
          return 0
        }
       },
       pullUpLoad:{
        type:Boolean,
        default:false
       }
    },
    data(){
        return{
        scroll:null,
        extraTransform : {
              // 起点的属性
              start: {
                scale: 0
              },
              // 终点的属性
              end: {
                scale: 1.1
              }
            },
        }
    },
    mounted(){
        // 通过document.querySelect（“.wrapper”）拿到的不一定是准确的，因为如果有多个类名叫wrapper，那么querySelect拿到的是第一个，可能会拿错
      this.scroll=new BScroll(this.$refs.wrapper,{
        click:true,
        probeType:this.probeType,
        pullUpLoad:this.pullUpLoad
      }),
      //监听滚动的位置，然后决定回到顶部按钮的显示与隐藏
      this.scroll.on('scroll',(position)=>{
        this.$emit('scroll',position)
      })
      // 监听上拉事件
      // this.scroll.on('pullingUp',()=>{
      //   this.$emit('pullingUp')
      // })

    },
    methods:{         
      scrollTo(x, y, time=300) {
        this.scroll && this.scroll.scrollTo(x, y, time)
        // 这个方法不起作用，可能过时了，
        // this.scroll && this.scroll.scrollTo(x, y, time,undefined,this.extraTransform)
      },
      finishPullUp(){
        this.scroll.finishPullUp()
      }
    }
}
</script>

<style scoped>

    .content{
        height: calc(100%-93px);

    }
</style>